<template>
  <transition name="move">
  <!--绑定better-scoll滚动 -->
  <div v-show="showFlag" class="food" ref="food">
    <div class="food-content">
      <!--设定图片高度100%,宽度100% -->
      <div class="image-header">
        <img :src="food.image" />
        <!--返回按钮 -->
        <div class="back" @click="hide">
          <i class="icon-arrow_lift"></i>
        </div>
      </div>
      <!--图片内容 -->
      <div class="content">
        <div class="title">{{food.name}}</div>
        <div class="detail">
           <span class="sell-count">月售{{food.sellCount}}份</span>
           <span class="rating">好评率{{food.rating}}%</span> 
        </div>
        <div class="price">
            <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
        </div>
        <!--加入购物车 绝对定位cartcontrol子组件  cartcontrol子组件中通过$.emit('addCart',addFood)传递到goods父组件addFood() 展示抛物小球-->
        <div class="cartcontrol-wrapper">
          <cartcontrol :food="food" @addCart="addFoodFood"></cartcontrol>
        </div>
        <!--添加第一个商品 通过动画消失可以监听到第一次添加购物车商品的抛出效果-->
        <transition name="fade">
          <div @click.stop.prevent="addFirst" class="buy" v-show="!food.count||food.count===0">加入购物车</div>
        </transition>
      </div>
      <!--区域块 -->
      <split v-show="food.info"></split>
      <!--商品介绍 -->
      <div class="info" v-show="food.info">
        <h1 class="title">商品信息</h1>
        <p class="text">{{food.info}}</p>
      </div>
       <!--区域块 -->
      <split ></split>
      <!--商品评价 -->
      <div class="rating">
        <div class="title">商品评价</div>
        <!--评价ratingselect子组件 -->
        <ratingselect @selectType="selectRatings"  @onlyContent="toggleContent" :desc="desc" :ratings="food.ratings" 
                      :select-type="selectType" :only-content="onlyContent" ></ratingselect>
        <!--评价内容列表 -->
        <div class="ratings-wrapper">
          <!--有评价内容 -->
          <ul v-show="food.ratings && food.ratings.length" >
            <!--show返回一个函数表达式 -->
            <li v-show="needShow(rating.rateType,rating.text)" v-for="(rating,index) in food.ratings" :key="index" class="rating-item border-1px">
              <div class="user">
                <div class="name">{{rating.username}}</div>
                <div class="avatar"><img :src="rating.avatar" width="12" height="12"/></div>
              </div>
              <div class="time"><span>{{rating.rateTime | formatDate}}</span></div>
              <p class="text">
                <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>{{rating.text}}
              </p>
            </li>
          </ul>
          <!--暂无评价内容 易写错!food.ratings && !food.ratings.length-->
          <div class="no-ratings" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
        </div>
      </div>
    </div>
  </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll';
import Vue from 'vue';
import cartcontrol from '../base/cartcontrol/cartcontrol.vue';
import split from '../base/split/split.vue';
import ratingselect from '../base/ratingselect/ratingselect.vue';
import {formatDate} from '../../utils/formdate.js';
//商品评价
const ALL = 2;

export default {
    props: {
      food: {
        type: Object
      }
    },
    components: {
      cartcontrol,
      split,
      ratingselect
    },
    data() {
      return {
        showFlag: false,
        selectType: ALL,
        onlyContent:true,
        desc:{
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      };
    },
    created() {
        // 初始化组件数据
        console.log('初始化调用food子组件   ' + this.food);
        console.log(this.desc);
    },
    filters: {
       //时间字符串转换
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date,'yyyy-MM-dd hh:mm'); //调用公共方法formateDate();
      }
    },
    methods: {
      show() {
        //goods父组件调用food子组件 
        this.showFlag = true;
        this.selectType = ALL; //初始化赋值
        this.onlyContent = false;

        //渲染dom
        this.$nextTick(() =>{
          console.log('第一次初始化food子组件的better-scoll' + this.foodSCroll);
          if(!this.foodSCroll){
            this.foodSCroll = new BScroll(this.$refs.food,{
              click:true //启动click事件
            });
          }else{
            this.foodSCroll.refresh();
          }
        });
      },
      hide() {
        //返回
        this.showFlag = !this.showFlag;
      },
      //添加购物车
      addFirst(event) {
        //兼容pc
        if(!event._constructed){
          return;
        }
        //设置第一个商品
        Vue.set(this.food,'count',1);// 向对象/数组添加是非响应的，强制响应
        this.$emit('addCart', event.target); //父组件goods中@addCart监听子组件shopcart。将点击dom对象作为参数传递到父组件的一个事件
      },
      addFoodFood(target) {
        console.log('触发addFoodFood()方法添加抛物小球效果');
        console.log(target);
        //cartcontrol子组件中通过$.emit('addCart')传递到food子组件addFoodFood(),再有food子组件$.emit('addCart')传递到goods父组件addFood()方法
        this.$emit('addCart', target);//父组件goods中@addCart监听子组件shopcart
      },
      //父组件监听到子组件selectType的变化
      selectRatings(type) {
        console.log('触发selectRatings方法将子组件更新同步到父组件也更新');
        this.selectType = type;
        this.$nextTick(() => {    // Vue的DOM更新是异步的
          this.foodSCroll.refresh();  // 改变高度后让BS重新计算才正确
        });
      },
      //vuejs2.0中，任何试图在组件内修改通过props传入的父组件数据都被认为是anti-pattern的,解决这个数据同步问题
      toggleContent() {
        console.log('触发toggleContent方法将子组件更新同步到父组件也更新');
        this.onlyContent = !this.onlyContent;
        this.$nextTick(() => {    // Vue的DOM更新是异步的 ，需要写$nextTick()进行回调渲染dom更新
          this.foodSCroll.refresh();  // 改变高度后让BS重新计算才正确
        });
      },
      //关联全部，推荐，吐槽切换
      needShow(type,text){
        if(this.onlyContent && !text){
          return false;
        }
        if(this.selectType === ALL){ //全部是2，单独判断
          return true;
        }else {
          return this.selectType === type;
        }
      }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss">
@import "../../assets/style/mixin.scss";
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 48px; //为啥设置 ?
  width: 100%;
  background: #fff;
  &.move-enter-active, &.move-leave-active {
    transition: all 0.5s linear;//线性环动
    transform: translate3d(0,0,0);
  }
  &.move-enter,&.move-leave-to { //此处不是 &.move-leave-to
    //从右到左的动画
    transform: translate3d(100%,0,0);
  }

  .image-header {
    position: relative;
    width: 100%;
    height: 0;//此处将高度设置0,通过padding-top达到高度100%效果 /* 根据宽度计算, 所以显示的图片宽高相等（padding区域也显示图片）*/
    padding-top: 100%;
    img {
      position: absolute;
      width: 100%;/* 撑满父容器 */
      height: 100%;
      top: 0;
      left: 0;
    }
    .back {
      position: absolute;
      top: 10px;
      left: 10px;
      .icon-arrow_lift {
        display: block; //为啥使用block呢?
        padding: 10px;//扩大点击事件的触发点
        font-size: 12px;
        color: #fff; 
      }
    }
  }
  .content {
    position: relative;
    padding: 18px;
    .title {
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 14px;
      font-weight: 700;
      color: rgb(7, 17, 27);
    }
    .detail {
      margin-bottom: 18px;
      line-height: 10px;
      height: 10px;
      .sell-count, .rating {
        font-size: 10px;
        color: rgb(147, 153, 159);
       }
      .sell-count {
        margin-right: 12px;
      }
    }
    .price {
      line-height: 24px;
      font-weight: 700;
      font-size: 0;
      .now {
        margin-right: 8px;
        font-size: 14px;
        font-weight: 900;
        color: #fa3a12;
      }
      .old {
        text-decoration: line-through;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }
    }
    .cartcontrol-wrapper {
      position: absolute;
      right: 18px;
      bottom: 18px;
      &.fade-enter-active,&.fade-leave-active {
        opacity: 1;
        transition: all 0.5s //延迟5s
      }
      &.fade-enter,&.fade-leave-to {
        opacity: 0;
        z-index: -1;
      }
    }
    .buy {
      position: absolute;
      padding: 0 12px;
      z-index: 10;//这个容易忽略
      right: 18px;
      bottom: 18px;
      height: 24px;
      line-height: 24px;
      font-size: 10px;
      border-radius: 24px;
      box-sizing: border-box;
      color: #fff;
      background: rgb(0, 160, 220);
    }
  }
  .info {
    padding: 18px;
    .title {
      line-height: 14px;
      margin-bottom: 6px;
      font-size: 14px;
      color: rgb(7, 17, 27);
    }
    .text {
      line-height:24px;
      padding:0 8px;
      font-size: 12px;
      color: rgb(77, 85, 93);
    }
  }
  .rating {
    padding-top: 18px;
    .title {
      line-height: 14px;
      margin-left: 18px;
      font-size: 14px;
      color: rgb(7, 17, 27);
    }
    .ratings-wrapper {
      padding: 0 18px;
      .rating-item {
        position: relative;
        padding: 16px 0;
        @include border-1px(rgba(7, 17, 27, 0.1));
        .user {
          position: absolute;//固定位置
          right: 0;//靠右
          top:16px;
          line-height: 12px;
          .name {
            display: inline-block;//布局
            vertical-align: top;
            margin-left: 6px;
            font-size: 10px;
            color: rgb(147, 152, 159);
          }
          .avatar {
            display: inline-block;
            vertical-align: top;
            border-radius: 50%;
          }
        }
        .time {
          margin-bottom: 6px;
          line-height: 12px;
          font-size: 10px;
          color: rgb(147, 152, 159);
        }
        .text {
          line-height: 16px;
          font-size: 12px;
          color: rgb(7, 17, 27);
          .icon-thumb_up {
            margin-right: 4px;
            line-height: 16px;
            font-size: 12px;
            color: rgb(147, 152, 159);
          }
          .icon-thumb_down {
            margin-right: 4px;
            line-height: 16px;
            font-size: 12px;
            color: rgb(0, 160, 220);
          }
        }
      }
      .no-ratings {
        padding: 16px 0;
        text-align: center;
        font-size: 12px;
        color: rgb(147, 153, 159)
      }
    }
  }
}
</style>
